<template>
  <div>
    <el-form class="form-search" :model="form" inline>
      <el-form-item label="测点类型">
        <el-select
          v-model="form.paramType"
          placeholder="请选择"
          collapse-tags
          clearable
        >
          <el-option
            v-for="item in paramTypeOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <div
          style="
            display: flex;
            align-items: center;
            position: relative;
            top: 5px;
          "
        >
          <label class="btn-nav-bg stripe-btn" @click="getList">查 询</label>
          <label class="btn-nav-bg stripe-btn" @click="handleAdd()"
            >新 建</label
          >
          <!--          <label class="btn-nav-bg stripe-btn" @click="importBtn()"-->
          <!--            >阈值配置</label-->
          <!--          >-->
          <el-upload
            class="upload-demo"
            action="#"
            :show-file-list="false"
            :http-request="importBtn"
          >
            <!--            <i class="el-icon-upload"></i>-->
            <label class="btn-nav-bg stripe-btn" @click="importBtn()"
              >阈值配置</label
            >
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
    <page-table
      :tableData="datas"
      :tableLabel="columns"
      :showSelection="false"
      :pager="pager"
      :table-height="tableHeight"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @handleButton="handleButton(arguments)"
    ></page-table>
    <!--    新增测点-->
    <pub-dialog
      :title="dialogTitle"
      type="big"
      top="15vh"
      :sureBtnLoading="loading"
      :dialogVisible="dialogVisible"
      dialogVisableRef="dialogSateVisible"
      @switchVisable="switchVisable"
      @dialogSubmit="dialogSubmit"
      @dialogCancel="dialogCancel"
      btnType="3"
    >
      <el-form
        class="form-search"
        label-width="90px"
        :rules="rules"
        ref="form"
        :model="formData"
      >
        <el-form-item label="分类" prop="paramType">
          <el-select v-model="formData.paramType">
            <el-option label="换流阀" value="0"></el-option>
            <el-option label="子模块" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="测点名称" prop="paramName">
          <el-input v-model="formData.paramName"></el-input>
        </el-form-item>
        <el-form-item label="测点key" prop="paramKey">
          <el-input v-model="formData.paramKey"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="paramUnit">
          <el-input v-model="formData.paramUnit"></el-input>
        </el-form-item>
        <!--        isSwitch表示测点类型（0：模拟量，1：开关量）-->
        <el-form-item label="开关量" prop="isSwitch">
          <el-select v-model="formData.isSwitch">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
          <label
            class="btn-nav-bg stripe-btn"
            v-if="formData.isSwitch == 1"
            @click="addInput"
            >增加</label
          >
          <template
            v-if="
              Array.isArray(formData.switchValue) && formData.switchValue.length
            "
          >
            <template v-for="(domain, index) in formData.switchValue">
              <el-form
                inline
                label-width="120px"
                :model="domain"
                ref="domainRef"
                :key="index"
              >
                <el-tag
                  color="#247382"
                  effect="dark"
                  type="success"
                  :key="index + 'label'"
                  >{{ index + 1 }}</el-tag
                >
                <el-form-item label="名称：" prop="name">
                  <!--                :rules="{-->
                  <!--                  required: true,-->
                  <!--                  message: '请输入名称',-->
                  <!--                  trigger: 'blur',-->
                  <!--                }"-->
                  <el-input
                    v-model="domain.name"
                    placeholder="请输入名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="值：" prop="value">
                  <!--                :rules="{-->
                  <!--                  required: true,-->
                  <!--                  message: '请输入值',-->
                  <!--                  trigger: 'blur',-->
                  <!--                }"-->
                  <el-input
                    v-model="domain.value"
                    placeholder="请输入值"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-tag
                    color="#247382"
                    effect="dark"
                    @click="deleteLine(index)"
                    style="cursor: pointer"
                    type="success"
                    :key="index + 'label'"
                    ><i class="el-icon-delete"></i
                  ></el-tag>
                  <!--                <label-->
                  <!--                  class="btn-nav-bg stripe-btn"-->
                  <!--                  v-if="form.param.length > 1"-->
                  <!--                  @click="deleteLine(index)"-->
                  <!--                  >删除</label-->
                  <!--                >-->
                </el-form-item>
              </el-form>
            </template>
          </template>
        </el-form-item>
      </el-form>
    </pub-dialog>
  </div>
</template>

<script>
import PageTable from "@/components/PageTable.vue";
import pubDialog from "@/components/pubDialog.vue";
import {
  getPointQuery,
  ImportVariate,
  xjMeasureAdd,
  xjMeasureDelete,
  xjMeasureDetail,
  xjMeasureUpdate,
} from "@/api/pointMaintain";

export default {
  name: "MeasurePoint",
  components: { pubDialog, PageTable },
  data() {
    return {
      form: {
        paramType: 0,
      },
      paramTypeOption: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 0,
          label: "换流阀",
        },
        {
          value: 1,
          label: "子模块",
        },
      ],
      datas: [],
      columns: [
        { label: "分类", param: "paramTypeName" },
        { label: "测点名称", param: "paramName" },
        { label: "测点Key", param: "paramKey" },
        { label: "单位", param: "paramUnit" },
        { label: "开关量", param: "switchValue" },
        {
          label: "操作",
          param: "operate",
          width: 200,
          operate: [
            {
              label: "编辑",
              click: "edit",
              type: "text",
            },
            {
              label: "删除",
              click: "remove",
              type: "text",
            },
          ],
        },
      ],
      pager: {
        pageSize: 10, // 每页数据量
        currentPage: 1, // 分页  当前页
        total: 0, //列表总数
      },
      tableHeight: 400,
      dialogTitle: "新增测点",
      dialogVisible: false,
      loading: false,
      formData: {
        paramType: "",
        paramName: "",
        paramKey: "",
        paramUnit: "",
        isSwitch: "",
        switchValue: [],
      },
      rules: {
        paramType: [
          { required: true, message: "请选择分类", trigger: "change" },
        ],
        paramName: [
          { required: true, message: "请输入测点名称", trigger: "blur" },
        ],
        paramKey: [
          { required: true, message: "请输入测点key", trigger: "blur" },
        ],
        paramUnit: [{ required: true, message: "请输入单位", trigger: "blur" }],
        isSwitch: [
          { required: true, message: "请选择开关量", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.calcHeight();
    this.getList();
  },
  mounted() {},
  methods: {
    // 阈值配置
    importBtn(param) {
      if (param) {
        const formData = new FormData();
        formData.append("file", param.file);
        ImportVariate(formData)
          .then((response) => {
            if (response.code === 20000) {
              this.$message.success("导入成功");
            }
          })
          .catch((response) => {});
      }
    },
    // 查询列表
    getList() {
      const params = {
        paramType: this.form.paramType,
        pageSize: this.pager.pageSize,
        currentPage: this.pager.currentPage,
      };
      getPointQuery(params).then((res) => {
        if (res.code == 20000) {
          this.datas = res.data.records;
          this.datas.forEach((item) => {
            item.paramTypeName = item.paramType == 0 ? "换流阀" : "子模块";
          });
          this.pager.total = Number(res.data.total);
        }
      });
    },
    handleSizeChange(val) {
      this.pager.pageSize = val;
    },
    handleCurrentChange(val) {
      this.pager.currentPage = val;
    },
    // 新增
    handleAdd() {
      this.dialogVisible = true;
      this.dialogTitle = "新增测点";
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
      this.formData.switchValue = [];
    },
    // 编辑、删除
    handleButton(method, row, index) {
      let API = method[0] === "remove" ? xjMeasureDelete : xjMeasureDetail;
      if (method[0] === "remove") {
        xjMeasureDelete({ id: method[1].id }).then((res) => {
          if (res.code == 20000) {
            this.getList();
            this.$message.success("删除成功！");
          }
        });
      } else {
        this.dialogVisible = true;
        this.dialogTitle = "编辑测点";
        xjMeasureDetail({ id: method[1].id }).then((res) => {
          if (res.code == 20000) {
            this.formData = res.data;
            this.formData.switchValue = this.formData.switchValue
              ? JSON.parse(this.formData.switchValue)
              : [];
            this.formData.paramType = this.formData.paramType.toString();
            this.formData.isSwitch = this.formData.isSwitch.toString();
          }
        });
      }
    },
    switchVisable(visable, ref) {
      this[ref] = visable;
    },
    dialogCancel() {
      this.dialogVisible = false;
    },
    // 保存添加或者编辑测点
    dialogSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          let params = { ...this.formData };
          params.switchValue = JSON.stringify(params.switchValue);
          let API = params.id ? xjMeasureUpdate : xjMeasureAdd;
          API(params)
            .then((res) => {
              if (res.code == 20000) {
                this.dialogVisible = false;
                this.getList();
                this.$message.success("保存成功");
              }
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
              return err;
            });
        }
      });
    },
    // 删除新增开关量
    deleteLine(index) {
      this.formData.switchValue.splice(index, 1);
    },
    // 新增开关量
    addInput() {
      this.formData.switchValue.push({
        name: "",
        value: "",
      });
    },
    calcHeight() {
      this.tableHeight = window.innerHeight - 270;
    },
  },
};
</script>
<style scoped lang="less">
::v-deep .form-search .el-form-item {
  margin-bottom: 22px;
}
::v-deep .el-dialog__body {
  height: 60vh;
  overflow-y: hidden;
  .el-form.form-search {
    height: 100%;
    overflow-y: auto;
  }
}
</style>
